<template>
  <div>
    <!-- <el-row style="margin-top: 20px">
      <span style="color: #fff"><i class="el-icon-s-custom">用户：</i> {{ username }}</span>
      <el-button type="danger" size="mini" plain style="margin-left: 20px">退出登录
      </el-button>
    </el-row> -->
    <!-- <el-row style="margin-top: 20px">
      <el-menu default-active="1" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff"
        active-text-color="#ffd04b" style="margin-right: 20px">
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>关联以太坊地址</span>
          </template>
          <el-menu-item v-for="(addr, index) in ethAddrList" :key="index" :index="index.toString()">{{ addr }}
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </el-row>
    <el-row style="margin-top: 20px">
      <el-button type="success" plain>添加关联地址</el-button>
    </el-row> -->
    <el-menu :default-openeds="['1', '3']" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"
      class="el-menu-demo" @select="handleSelect">
      <el-submenu class="userManage" index="1">
        <template slot="title"><i class="el-icon-setting"></i>用户管理</template>
        <el-menu-item-group>
          <!-- <template slot="title">分组一</template> -->
          <el-menu-item index="1-1"><i class="el-icon-message"></i>基本信息</el-menu-item>
          <el-menu-item index="1-2"><i class="el-icon-truck"></i>车辆信息</el-menu-item>
          <el-menu-item index="1-3"><i class="el-icon-s-cooperation"></i>钱包管理</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title"><i class="el-icon-menu"></i>能源交易</template>
        <el-menu-item-group>
          <!-- <template slot="title">分组一</template> -->
          <el-menu-item index="2-1"><i class="el-icon-connection"></i>放电拍卖</el-menu-item>
          <el-menu-item index="2-2"><i class="el-icon-shopping-cart-full"></i>充电购买</el-menu-item>
          <el-menu-item index="2-3"><i class="el-icon-sort"></i>交易历史</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <!-- <el-submenu index="3">
        <template slot="title"><i class="el-icon-setting"></i>导航三</template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="3-1">选项1</el-menu-item>
          <el-menu-item index="3-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="3-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="3-4">
          <template slot="title">选项4</template>
          <el-menu-item index="3-4-1">选项4-1</el-menu-item>
        </el-submenu>
      </el-submenu> -->
    </el-menu>
  </div>
</template>

<script>
export default {
  name: "UserManage",
  props: {
    activeIndex: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      username: "FangTiewei",
      ethAddrList: ["0x123455", "0xadsa7d68asd", "0xasd87asd79a"],
    };
  },
  methods: {
    handleSelect(value) {
      // this.$emit("update:activeIndex", value);
      this.$emit("update:activeIndex", value);
      console.log("888", value);
    }
  },
};
</script>

<style>
.userManage {
  color: aqua;
}
</style>
